{% extends "layout.html" %}

{% block xx %}
    <script>
        {#    添加功能模块对话框#}
        function showModal() {
            document.getElementById('shadow1').classList.remove('hide');
            document.getElementById('add-modal1').classList.remove('hide');
        }
        function AjaxSend() {
            $.ajax({
                url: '/modal_add_class/',
                type: 'POST',
                data: {'title': $('#title').val()},
                success: function (data) {
                    // 当服务端处理完毕后返回数据时，该函数自动调用
                    // data=服务端返回值
                    console.log(data);
                    if(data == "OK"){
                        location.href='/classes/';
                    }else{
                        $('#errormsg').text(data);
                    }
                }
            })
        }
        function cancelModal() {
            document.getElementById('shadow1').classList.add('hide');
            document.getElementById('add-modal1').classList.add('hide');
            document.getElementById('editModal').classList.add('hide');
            document.getElementById('delModal').classList.add('hide');
        }

        {#编辑功能#}
        function modelEdit(ths) {
            document.getElementById('shadow1').classList.remove('hide');
            document.getElementById('editModal').classList.remove('hide');
            /*
            1.获取当前点击标签
            2.当前标签的父标签，再找上一级标签
            3.获取班级当前行班级名称赋值给对话框
            */
            var row = $(ths).parent().prevAll();
            {# 获取td里的内容 #}
            var content = $(row[0]).text();
            var contentid = $(row[1]).text();
            $('#eidtTitle').val(content);
            $('#eidtid').val(contentid);
        }
        function editAjaxSend() {
            var nid = $('#eidtid').val();
            var content = $('#eidtTitle').val();
            $.ajax({
                url: "/modal_edit_class/",
                type: 'POST',
                data: {'nid': nid, 'content': content},
                success: function (arg) {
                    //arg是字符串类型
                    //JSON.parse() -> 对象
                    //JSON.stringify(对象) ->字符串
                    arg = JSON.parse(arg);
                    if(arg.status){
                        //location.href = '/classes/';
                        location.reload();
                    }else{
                        alert(arg.message)
                    }
                }
                }
            )
        }
        function modeldel(ths) {
            document.getElementById('shadow1').classList.remove('hide');
            document.getElementById('delModal').classList.remove('hide');
            var row = $(ths).parent().prevAll();
            var id = $(row[1]).text();
            var name = $(row[0]).text();
            $("#delid").text(id);
            $("#delname").text(name);
        }
        function delAjaxSend() {
            var nid = $("#delid").text();
            var name = $("#delname").text();
            $.ajax({
                url: "/modal_del_class/",
                type: "POST",
                data: {'nid': nid, "name": name},
                success: function (arg) {
                    arg = JSON.parse(arg);
                    if(arg.status){
                        location.reload();
                    }else{
                        alert(arg.message)
                    }
                }
            })
        }
    </script>
<body>
    <div>
        <div style="margin: 10px">
            <a class="btn btn-primary" href="/add_class/">添加</a>
            <a class="btn btn-info" onclick="showModal()">对话框添加</a>
        </div>
        <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>班级名称</th>
            </tr>
        </thead>
        <tbody>
            {% for row in class_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.title }}</td>
                    <td>
                        <a class="glyphicon glyphicon-pencil" href="/edit_class/?nid={{ row.id }}"></a>
                        |
                        <a onclick="modelEdit(this);">对话框编辑</a>
                        |
                        <a class="glyphicon glyphicon-trash" href="/del_class/?nid={{ row.id }}"></a>
                        |
                        <a class="fa fa-times-rectangle" onclick="modeldel(this);"></a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
{#    添加功能模块对话框#}
    <div id="shadow1" class="shadow1 hide"></div>
    <div id='add-modal1' class="add-modal1 hide">
        <p>
            <input id="title" type="text" name="title">
        </p>
        <input type="button" value="提交" onclick="AjaxSend();"><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancelModal();">
    </div>
{#编辑功能模块对话框#}
    <div id="shadow1" class="shadow1 hide"></div>
    <div id="editModal" class="add-modal1 hide">
        <h3>编辑框</h3>
        <p>
            <input id="eidtid" type="text" name="id" style="display: none">
            <input id="eidtTitle" type="text" name="title">
        </p>
        <input type="button" value="提交" onclick="editAjaxSend();"><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancelModal();">
    </div>
{#对话框删除#}
    <div id="shadow1" class="shadow1 hide"></div>
    <div id="delModal" class="add-modal1 hide">
        <h3>删除框</h3>
        <p>
            <a id = "delid" style="display: none"></a>
            <a>是否删除:</a>
            <a id = "delname"></a>
        </p>
        <input type="button" value="提交" onclick="delAjaxSend();"><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancelModal();">
    </div>
</body>
{% endblock %}